<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<style>
    #app *{
        height: 100px;
        min-width: 100px;
        background-color: chocolate;
        margin: 25px;
        display: inline-block;
        text-align: center;
        line-height: 100px;
    }
</style>
<body>

<p>菜鸟教程网：</p>
<a href="http://www.runoob.com/vue2/vue-events.html" target="_blank">http://www.runoob.com/vue2/vue-events.html</a>
<div id="app">
    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis">阻止单击事件冒泡</a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit">提交事件不再重载页面</form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat">修饰符可以串联</a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent>只有修饰符</form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">添加事件侦听器时使用事件捕获模式</div>
    <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">只当事件在该元素本身（而不是子元素）触发时触发回调 </div>

    <!-- click 事件只能点击一次，2.1.4版本新增 -->
    <a v-on:click.once="doThis">click 事件只能点击一次，2.1.4版本新增</a>
</div>

<script>
    new Vue({
        el: '#app',
        data: {

        },
        methods:{
            doThis:function (e) {
                alert(e.target.tagName)
            }
        }
    })
</script>
</body>
</html>